/**
* 模版
**/ 

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学科" prop="firstSubject">
        <el-select v-model="ruleForm.firstSubject"  placeholder="请选择已有学科，无则输入新建" @blur="changeSecondSubjectArray(ruleForm.firstSubject)">
          <div v-for="item in this.firstSubjectArray" :key="item.id" >
            <el-option :label="item.subject" :value="item.subject" ></el-option>
          </div>
        </el-select><br/><br/>
        <el-input placeholder="填写新建的学科名字" v-model="ruleForm.firstSubject"  @blur="checkFirstSucject"></el-input> 注意：新建同层级题库，无则忽略
      </el-form-item>
      <el-form-item label="年级" prop="secondSubject">
        <el-select v-model="ruleForm.secondSubject" placeholder="请选择已有年级,无则输入新建" @blur="changeThirdSubjectArray(ruleForm.secondSubject)" value-key="subject">
          <div v-for="item in this.secondSubjectArray" :key="item.id" >
            <el-option :label="item.subject" :value="item" :key="item.id"></el-option>
          </div>
        </el-select><br/><br/>
        <el-input placeholder="填写新建的年级名字" v-model="ruleForm.secondSubject.subject" @blur="checkSecondSucject" ></el-input> 注意：新建同层级题库，无则忽略
      </el-form-item>
      <el-form-item label="难易度" prop="thirdSubject">
        <el-input v-model="ruleForm.thirdSubject" @blur="checkThirdSucject"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
      <br/>
    </el-form>
  </div>
</template>

<script>

import {
  addOne,
  iList2,
  findBySubject,
  findById,
  findAllSonSubjectById
} from '@/api/questionInventoryMG';


// 导入组件
// import headerComponent from "./head.vue";
// 导出模块
export default {
  // 模块名字
  name: 'template',
  // 模块数据
  data() {
    //数据
    return {
      ruleForm: {
          firstSubject:'',
          secondSubject:'',
          thirdSubject: '',
        },
      //第一层学科数据数组
      firstSubjectArray:[],
      //第二层学科数据数组
      secondSubjectArray:[],
      //第三层学科数据数组
      thirdSubjectArray:[],
      
      //学科是否新建
      firstFlag:false,
      //年级是否新建
      secondFlag:false,
      //难度是否新建
      thirdFlag:false,

      //第二层学科的fid
      secondSubjectFid:0,
      //第三层学科的fid
      thirdSubjectFid:0,

      //新对象
      newSubjectObject: {
        id: null,
        subject: "",
        user: null,
        addTime: "",
        updateTime: "",
        fid:0
      },
        
        rules: {
          firstSubject: [
            { required: true, message: '请输入科目名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
         
          ],
          secondSubject: [
            { required: true, message: '请输入年级名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          thirdSubject: [
            { required: true, message: '请输入题库名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
        },
      
    }
  },
  // 注册组件
  components: {
   
    // headerComponent
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {

    //提交表单
    submitForm(formName) {
      this.firstSubjectArray.forEach(element => {
        if(element==this.firstSubject){
          this.firstFlag=true;
        }
      });
      this.secondSubjectArray.forEach(element => {
        if(element==this.secondSubject){
          this.secondFlag=true;
        }
      });
      this.thirdSubjectArray.forEach(element => {
        if(element==this.thirdSubject){
          this.thirdFlag=true;
        }
      });
      console.log(this.firstFlag)
      console.log(this.secondFlag)
      console.log(this.thirdFlag)
      //三项都是新建
      if(this.firstFlag&&this.secondFlag&&this.thirdFlag){
        this.newSubjectObject.subject=this.ruleForm.firstSubject;
        this.newSubjectObject.user = JSON.parse(
          localStorage.getItem("userdata")
        ).data;
        this.newSubjectObject.fid=0;
        addOne(this.newSubjectObject).then(res=>{
          console.log(res, "添加科目成功");
          alert("添加科目成功");

          //通过科目名称查找出添加的这个科目对象
          findBySubject(this.ruleForm.firstSubject).then(res=>{
            console.log(res);"........."






          }).catch();
        }).catch();
  
      }
      //新建难易程度
      if((this.firstFlag==false)&&(this.secondFlag==false)&&(this.thirdFlag)){
        this.newSubjectObject.subject=this.ruleForm.firstSubject;
        this.newSubjectObject.user = JSON.parse(
          localStorage.getItem("userdata")
        ).data;
        this.newSubjectObject.fid=this.thirdSubjectFid;
        addOne(this.newSubjectObject).then(res=>{
          
          console.log(res, "添加科目成功");"========"
          this.$message('添加成功');
        }).catch();
  
      }
        // this.$refs[formName].validate((valid) => {
          // if (valid) {
          //   this.$message({
          //   message: '恭喜你，成功创建',
          //   type: 'success'
          // });
          // } else {
          //   console.log('error submit!!');
          //   return false;
          // }
        // });
      },
      //重置表单内容
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //年级选择框选项聚焦事件
      transmitId(params){
        console.log(123445)
        console.log(params)
      },

   
     
      //选择学科(第一个科目)栏离焦事件
      changeSecondSubjectArray(params){
        //如果从选择框选择的科目
        if(this.firstSubject!=''&&this.firstFlag==false){
           //根据传入的科目名称，查找id
          findBySubject(params).then(res=>{
          // console.log(res.data.id)
          this.secondSubjectFid=res.data.id
          this.secondSubjectArray=res.data.questionInventories
        }).catch()
        
         findAllSonSubjectById(0).then(res=>{
          (res.data).forEach(element => {
            if(params==element.subject){
              this.firstFlag=false;
            }
          });

        }).catch()
        }
       
      },
      //选择年级（第二个科目）栏离焦事件
      changeThirdSubjectArray(params){
          //如果科目非新建,给下一级fid赋值
          this.thirdSubjectFid=params.id;
          findAllSonSubjectById(params.id).then(res=>{
            this.thirdSubjectArray=res.data
            console.log(res)
            
          }).catch()
        
       
      },
      //验证学科输入框的字段是否有重合
      checkFirstSucject(){
        findBySubject(this.ruleForm.firstSubject,).then(res=>{
          if(res.data==''||res.data.fid!=0||res.data==null){
            //学科名称未重复
            this.firstFlag=true;
          }else{
            //学科名称重复
            this.open1();
          }
        }).catch()
      },
      //firstSubject输入框命名重复提示框弹出方法
      open1() {
        this.$alert('名称已存在，请重新命名', '命名重复提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.ruleForm.firstSubject=''
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
      },
    //验证年级输入框的字段是否有重合
      checkSecondSucject(){
        findBySubject(this.ruleForm.secondSubject,).then(res=>{
          if(res.data==''||res.data.fid!=0||res.data==null){
            //学科名称未重复
            this.thirdFlag=true;
            
          }else{
            //学科名称重复
            this.open2();
          }
        }).catch()
      },
       //secondSubject输入框命名重复提示框弹出方法
      open2() {
        this.$alert('名称已存在，请重新命名', '命名重复提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.ruleForm.secondSubject=''
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
      },
      //验证难易度输入框的字段是否有重合
      checkThirdSucject(){
        // console.log(this.ruleForm.thirdSubject);
        this.thirdSubjectArray.forEach(element => {
          // console.log(element.subject);
          // console.log(this.ruleForm.thirdSubject)
          if(this.ruleForm.thirdSubject==element.subject){
            this.open3;
          }else{
             this.thirdFlag=true;
          }
        });
      },
       //secondSubject输入框命名重复提示框弹出方法
      open3() {
        this.$alert('名称已存在，请重新命名', '命名重复提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.ruleForm.secondSubject=''
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
      },

  },



  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    //调用接口查找所有题库方法
    iList2().then(res=>{
      // console.log(res);
      this.firstSubjectArray=res.data.data.data.list;
    }).catch()
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>
// scoped 样式只在本组件使用
<style scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
</style>
